<template>
  <!-- 标签 -->
  <div class="model label">
    <div class="tittle">标签</div>
    <div>
      <div class="js">
        <a href="#">技术<span>{{ data.js || 0 }}</span></a>
      </div>
      <div class="xy">
        <a href="#">校园<span>{{ data.xy || 0 }}</span></a>
      </div>
      <div class="yl">
        <a href="#">娱乐<span>{{ data.yl || 0 }}</span></a>
      </div>
      <div class="wx">
        <a href="#">文学<span>{{ data.wx || 0 }}</span></a>
      </div>
      <div class="qt">
        <a href="#">其他<span>{{ data.qt || 0 }}</span></a>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    let data = reactive({})

    let timer = ref(0)
    onMounted(() => {
      // 先请求一次
      myPost("/count", { fresh: Math.random() }, function (count) {
        for (let item of count) { data[item.blog_label] = item.count }
      })
      // 然后设置定时器，每5分钟请求一次
      timer.value = setInterval(() => {
        myPost("/count", { fresh: Math.random() }, function (count) {
          // console.log(count)
          for (let item of count) { data[item.blog_label] = item.count }
        })
      }, 1000 * 60 * 10)
    })
    // 卸载时，去除定时器
    onBeforeUnmount(() => {
      clearInterval(timer)
    })

    return { data, timer }
  }

};
</script>

<style scoped>
/* 标签 */
.label>div>div {
  margin-top: 10px;

  /* vertical-align:top; */
}

.label>div span {
  float: right;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: var(--class-span-color);
}

/* 栏目标题 */
.tittle {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}
</style>